﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BMPT_MES_Board.aspx.cs" Inherits="SaicMotor.MES_Board" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js_css/js/jquery-1.12.3.js"></script>
    <title>产品看板</title>
    <style type="text/css">
        body {
            width: 100%;
            height: 675px;
            background-color: black;
        }

        .divMain {
            width: 100%;
            height: 10%;
            background-color: black;
        }

        .Title {
            width: 88%;
            height: auto;
            float: right;
            background-color: black;
            font-size: xx-large;
            line-height: 100px;
            text-align: center;
            /*display: table-cell;*/
            display: inline-block;
            vertical-align: middle;
        }

        .pic {
            width: 12%;
            height: 100px;
            border: 1px solid #ccc;
            float: left;
            box-sizing: border-box;
            text-align: center;
            font-size: 18px;
            color: red;
            display: flex;
            justify-content: center;
            align-items: center;
            /*img{
                width: 100%;
                height: auto;
            }*/
            display: inline-block;
        }

        .timer {
            width: 100%;
            height: 10%;
            background-color: black;
            float: left;
            font-size: x-large;
            line-height: 90px;
            text-align: right;
            display: inline;
            vertical-align: middle;
        }

        .pp {
            width: 100%;
            height: 60%;
            font-size: x-large;
            line-height: 80px;
            background-color: dodgerblue;
        }

        .Slogan {
            width: 100%;
            height: auto;
            background-color: black;
            margin-bottom: 0px;
            font-size: xx-large;
            line-height: 90px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }

        .tablecss {
            text-align: center;
            border-collapse: collapse;
        }

        .tdcss {
            border: solid rgba(128, 128, 128, 0.31) 3px;
        }
    </style>
</head>
<body style="width: auto">
    <form id="form1" runat="server">
        <div class="pic">
            <img style="width: 100%; height: auto" src="images/BMPT/北汽模塑.jpg" />
        </div>
        <div class="Title">
            <p id="Title" style="color: white"></p>
        </div>
        <div class="timer">
            <asp:Label ID="timer" runat="server" Text="Label" ForeColor="White"></asp:Label>
        </div>
        <div class="pp" id="pp" style="color: white">
            <table style="width: 100%; border: 0px solid #ff0000;">

                <tr class="tablecss">
                    <td id="c1" class="tdcss"></td>
                    <td id="c2" class="tdcss"></td>
                    <td id="c3" class="tdcss"></td>
                    <td id="c4" class="tdcss"></td>
                    <td id="c5" class="tdcss"></td>
                    <td id="c6" class="tdcss"></td>
                    <td id="c7" class="tdcss"></td>
                </tr>

                <tr class="tablecss">
                    <td id="td_00" class="tdcss"></td>
                    <td id="td_01" class="tdcss"></td>
                    <td id="td_02" class="tdcss"></td>
                    <td id="td_03" class="tdcss"></td>
                    <td id="td_04" class="tdcss"></td>
                    <td id="td_05" class="tdcss"></td>
                    <td id="td_06" class="tdcss"></td>
                </tr>

                <tr class="tablecss">
                    <td id="td_10" class="tdcss"></td>
                    <td id="td_11" class="tdcss"></td>
                    <td id="td_12" class="tdcss"></td>
                    <td id="td_13" class="tdcss"></td>
                    <td id="td_14" class="tdcss"></td>
                    <td id="td_15" class="tdcss"></td>
                    <td id="td_16" class="tdcss"></td>
                </tr>

                <tr class="tablecss">
                    <td id="td_20" class="tdcss" colspan="2"></td>
                    <%--<td id="td_21" class="tdcss"></td>--%>
                    <td id="td_22" class="tdcss"></td>
                    <td id="td_23" class="tdcss"></td>
                    <td id="td_24" class="tdcss"></td>
                    <td id="td_25" class="tdcss"></td>
                    <td id="td_26" class="tdcss"></td>
                </tr>
            </table>
        </div>
        <div class="Slogan" style="color: white; width: 1900px">
            <p id="Slogan"></p>
        </div>
    </form>
    <script type="text/javascript">
        //页面加载调用
        window.onload = function () {
            //每1秒刷新时间
            setInterval("NowTime()", 1000);
            //获取页面标题、欢迎语
            //GetOtherInfo();
            setInterval("GetOtherInfo()", 1000);
            //获取表格tittle
            //GetTittleInfo();
            setInterval("GetTittleInfo()", 1000);
            //跑马灯
            fun();
            //获取表格数据
            setInterval("GetHtmlInfo()", 1000);
        }

        function GetHtmlInfo() {
            var json = "";
            $.ajax({
                type: "post",
                //url: "/SaciMotor.ashx",
                url: "/BMPT_MES_Board.ashx",
                data: {
                    action: "GetHtmlInfo"
                },
                dataType: "text",
                async: false,
                success: function (data) {
                    json = eval('(' + data + ')');
                    document.getElementById('td_00').innerHTML = json["Rows"][0]['PartType'];
                    document.getElementById('td_01').innerHTML = json["Rows"][0]['PartName'];
                    document.getElementById('td_02').innerHTML = json["Rows"][0]['EdiNum'];
                    document.getElementById('td_03').innerHTML = json["Rows"][0]['ToBeSort'];
                    document.getElementById('td_04').innerHTML = json["Rows"][0]['ToBeDelivered'];
                    document.getElementById('td_05').innerHTML = json["Rows"][0]['InTransit'];
                    document.getElementById('td_06').innerHTML = json["Rows"][0]['LineSideNum'];

                    document.getElementById('td_10').innerHTML = json["Rows"][1]['PartType'];
                    document.getElementById('td_11').innerHTML = json["Rows"][1]['PartName'];
                    document.getElementById('td_12').innerHTML = json["Rows"][1]['EdiNum'];
                    document.getElementById('td_13').innerHTML = json["Rows"][1]['ToBeSort'];
                    document.getElementById('td_14').innerHTML = json["Rows"][1]['ToBeDelivered'];
                    document.getElementById('td_15').innerHTML = json["Rows"][1]['InTransit'];
                    document.getElementById('td_16').innerHTML = json["Rows"][1]['LineSideNum'];

                    document.getElementById('td_20').innerHTML = "合计数量";
                    //document.getElementById('td_21').innerHTML = "合计数量";
                    document.getElementById('td_22').innerHTML = parseInt(document.getElementById('td_02').innerText) + parseInt(document.getElementById('td_12').innerText);
                    document.getElementById('td_23').innerHTML = parseInt(document.getElementById('td_03').innerText) + parseInt(document.getElementById('td_13').innerText);
                    document.getElementById('td_24').innerHTML = parseInt(document.getElementById('td_04').innerText) + parseInt(document.getElementById('td_14').innerText);
                    document.getElementById('td_25').innerHTML = parseInt(document.getElementById('td_05').innerText) + parseInt(document.getElementById('td_15').innerText);
                    document.getElementById('td_26').innerHTML = parseInt(document.getElementById('td_06').innerText) + parseInt(document.getElementById('td_16').innerText);
                }
            });
        }

        function GetOtherInfo() {
            var json = "";
            $.ajax({
                type: "post",
                url: "/BMPT_MES_Board.ashx",
                data: {
                    action: "GetOtherInfo"
                },
                dataType: "text",
                async: false,
                success: function (data) {
                    json = eval('(' + data + ')');
                    document.getElementById('Title').innerHTML = json["Rows"][0]['Title'];
                    document.getElementById('Slogan').innerHTML = json["Rows"][0]['Slogan']
                }
            });
        }

        function GetTittleInfo() {
            var json = "";
            $.ajax({
                type: "post",
                url: "/BMPT_MES_Board.ashx",
                data: {
                    action: "GetTittleInfo"
                },
                dataType: "text",
                async: false,
                success: function (data) {
                    json = eval('(' + data + ')');
                    document.getElementById('c1').innerHTML = json["Rows"][0]['c1'];
                    document.getElementById('c2').innerHTML = json["Rows"][0]['c2'];
                    document.getElementById('c3').innerHTML = json["Rows"][0]['c3'];
                    document.getElementById('c4').innerHTML = json["Rows"][0]['c4'];
                    document.getElementById('c5').innerHTML = json["Rows"][0]['c5'];
                    document.getElementById('c6').innerHTML = json["Rows"][0]['c6'];
                    document.getElementById('c7').innerHTML = json["Rows"][0]['c7'];
                }
            });
        }

        function NowTime() {
            //获取年月日
            var time = new Date();
            var year = time.getFullYear();
            var month = time.getMonth();
            var day = time.getDate();

            //获取时分秒
            var h = time.getHours();
            var m = time.getMinutes();
            var s = time.getSeconds();

            //检查是否小于10
            h = check(h);
            m = check(m);
            s = check(s);
            document.getElementById("timer").innerHTML = year + "年" + month + "月" + day + "日  " + h + ":" + m + ":" + s;
        }
        //时间数字小于10，则在之前加个“0”补位。
        function check(i) {
            var num;
            i < 10 ? num = "0" + i : num = i;
            return num;
        }

        //设置跑马灯
        var position = $(".Slogan").scrollLeft();
        function fun() {
            if (position > 600) {
                position = 0;
            }
            $(".Slogan").scrollLeft(position++);
            //t = setTimeout("fun()", 30);
        }
    </script>
</body>
<%--获得Json内容样例--%>
<%--//"[
        //  {
        //    "Id": 1,
        //    "PartType": "X247&H247&Z177",
        //    "PartName": "后保总成",
        //    "EdiNum": 30,
        //    "ToBeSort": 40,
        //    "ToBeDelivered": 50,
        //    "InTransit": 60,
        //    "LineSideNum": 70
        //  },
        //  {
        //    "Id": 2,
        //    "PartType": "V205MOPF",
        //    "PartName": "后保总成",
        //    "EdiNum": 30,
        //    "ToBeSort": 40,
        //    "ToBeDelivered": 50,
        //    "InTransit": 60,
        //    "LineSideNum": 70
        //  }
        //]"--%>
</html>